<template >
  <el-container>
    <el-header>
      <div style="margin-top: 15px;">
        <p style="font-size: 20px">查询结果</p>
        <!--                <el-input v-model="keyword" placeholder="中文名称/英文名/CAS/SMILES" class="input-with-select"-->
        <!--                          @keyup.native.enter="findPage(null)">-->
        <!--                  <el-select slot="prepend" v-model="type" placeholder="请选择">-->
        <!--                    <el-option label="所有类型" value=""/>-->
        <!--                    <el-option label="染料" value="染料"/>-->
        <!--                    <el-option label="助剂" value="助剂"/>-->
        <!--                  </el-select>-->
        <!--                  <el-button slot="append" icon="el-icon-search" @click="findPage(null)"/>-->
        <!--                </el-input>-->
      </div>
    </el-header>
    <el-dialog title="编辑属性" :visible.sync="elementModifyFlag" width="95%">
      <element-modify :element-data="elementData"/>
    </el-dialog>
    <el-main>
      <kt-table
        :height="650"
        perms-view="admin"
        :perms-edit="currentUser"
        :perms-delete="currentUser"
        :data="pageResult"
        :columns="columns"
        @findPage="findPage"
        @handleView="queryDetail"
        @handleEdit="modify"
        @handleDelete="deleteElement"
      />
    </el-main>
    <el-dialog class="abow_dialog" :title='elementInfo+"的物质信息"' :visible.sync="detailFlag" width="97%" >
      <element-detail
        :element-id="queryId"
        :perms="currentUser"/>
    </el-dialog>
  </el-container>

</template>

<script>
import KtTable from '@/views/Core/KtTable'
import ElementDetail from '@/views/Element/ElementDetail'
import ElementModify from './ElementModify'
import AddRecord from "./AddRecordEle/AddRecord";

export default {
  name: 'Element',
  // 注册引入过来的组件
  components: {
    AddRecord,
    ElementModify,
    ElementDetail,
    KtTable
  },
  data() {
    return {
      elementInfo:'',
      elementModifyFlag: false,
      keyword: '',
      cl: '',
      type: '',
      pageRequest: {
        pageNumber: 1,
        pageSize: 15
      },
      radio: '',
      pageResult: {},
      resultFlag: false,
      detailFlag: false,
      queryId: '',
      elementData: {},
      currentUser: 'guest',
      columns: [
        {prop: 'baseinfoWzbm', label: '物质编码', minWidth: 50},
        {prop: 'baseinfoType', label: '溶剂/原料', minWidth: 55},
        {prop: 'baseinfoKind', label: '类别', minWidth: 60},
        {prop: 'baseinfoZwmc', label: '中文名称', minWidth: 180},
        {prop: 'baseinfoYwmc', label: '英文名称', minWidth: 100},
        {prop: 'baseinfoCi', label: 'C.I.', minWidth: 80},
        {prop: 'baseinfoCas', label: 'CAS', minWidth: 80},
        {prop: 'baseinfoSmiles', label: 'SmileS', minWidth: 220}

      ]
    }
  },
  mounted() {
    var user = sessionStorage.getItem('user')
    this.currentUser = user
  },
  methods: {
    findPage: function (data) {
      console.log('data', data)
      if (data !== null) {
        this.pageRequest = data.pageRequest
      }
      this.pageRequest.cl = sessionStorage.getItem('cl')
      this.pageRequest.keyword = sessionStorage.getItem('keyword')
      // this.pageRequest.keyword = this.keyword
      this.pageRequest.type = this.type
      this.pageRequest.radio = sessionStorage.getItem('radio')
      if (this.pageRequest.radio === '1') {
        this.$api.element.queryZwmc(this.pageRequest).then((res) => {
          this.pageResult = res.data
          this.resultFlag = true
          console.log(this.pageRequest)
          console.log("------------queryZwmc-----------------")
          console.log(this.pageResult)
        }).then(data != null ? data.callback : '')
      } else if (this.pageRequest.radio === '2') {
        this.$api.element.queryYwmc(this.pageRequest).then((res) => {
          // this.pageResultSenior = res.data
          this.pageResult = res.data
          this.resultFlag = true
          console.log("------------queryYwmc----------------")
          console.log(this.pageResult)
        }).then(data != null ? data.callback : '')
      } else if (this.pageRequest.radio === '3') {
        this.$api.element.queryCas(this.pageRequest).then((res) => {
          this.pageResult = res.data
          this.resultFlag = true
          console.log("--------queryCas------------------")
          console.log(this.pageResult)
        }).then(data != null ? data.callback : '')
      } else if (this.pageRequest.radio === '4') {
        this.$api.element.querySmiles(this.pageRequest).then((res) => {
          this.pageResult = res.data
          this.resultFlag = true
          console.log("------------querySmiles----------------")
          console.log(this.pageResult)
        }).then(data != null ? data.callback : '')
      } else if (this.pageRequest.radio === '5') {
        this.$api.element.queryKind(this.pageRequest).then((res) => {
          this.pageResult = res.data
          this.resultFlag = true
          console.log("------------querykind----------------")
          console.log(this.pageResult)
        }).then(data != null ? data.callback : '')
      } else if (this.pageRequest.radio === '7') {
        this.pageRequest.type = '原料'
        this.$api.element.queryType(this.pageRequest).then((res) => {
          this.pageResult = res.data
          this.resultFlag = true
          console.log('------------queryType----------------')
          console.log(this.pageResult)
        }).then(data != null ? data.callback : '')
      } else if (this.pageRequest.radio === '8') {
        this.pageRequest.type = '溶剂'
        this.$api.element.queryType(this.pageRequest).then((res) => {
          this.pageResult = res.data
          this.resultFlag = true
          console.log('------------queryType----------------')
          console.log(this.pageResult)
        }).then(data != null ? data.callback : '')
      } else if (this.pageRequest.radio === '' && this.pageRequest.keyword !== '') {
        this.$api.element.queryZwmc(this.pageRequest).then((res) => {
          this.pageResult = res.data
          this.resultFlag = true
          console.log(this.pageRequest)
          console.log("------------queryZwmc-----------------")
          console.log(this.pageResult)
        }).then(data != null ? data.callback : '')
      }else {
        this.$api.element.find(this.pageRequest).then((res) => {
          this.pageResult = res.data
          this.resultFlag = true
        }).then(data != null ? data.callback : '')
      }


      // if (this.pageRequest.cl !== '') {
      //   this.$api.element.find(this.pageRequest).then((res) => {
      //     this.pageResult = res.data
      //     this.resultFlag = true
      //   }).then(data != null ? data.callback : '')
      // } else {
      //   this.$api.element.findSenior(this.pageRequest).then((res) => {
      //     // this.pageResultSenior = res.data
      //     this.pageResult = res.data
      //     this.resultFlag = true
      //     console.log('-----------findSenior-------------')
      //     console.log(this.pageResult)
      //   }).then(data != null ? data.callback : '')
      // }

    },
    queryDetail: function (params) {
      const id = params.row.baseinfoWzbm
      console.log(id)
      this.detailFlag = true
      this.queryId = id
      this.$api.element.findById(id).then((res) => {
        this.elementInfo=res.data.baseinfoZwmc
      })
    },
    modify: function (params) {
      const id = params.row.baseinfoWzbm
      this.$api.element.findById(id).then((res) => {
        this.elementModifyFlag = true
        this.elementData = res.data
      })
    },
    deleteElement: function (params) {
      console.log(params)
      const id = params.row.baseinfoWzbm
      this.$confirm('此操作将永久删除该元素, 是否继续?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.element.delById(id).then((res) => {
          this.findPage(null)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}

</script>

<style>
.el-select .el-input {
  width: 130px;
}

.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.el-dialog__title {
  line-height: 24px;
  font-size: 25px !important;
  color: #303133;
}
.el-tabs__item {
  padding: 0 20px;
  height: 40px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  line-height: 40px;
  display: inline-block;
  list-style: none;
  font-size: 16px !important;
  font-weight: 500;
  color: #303133;
  position: relative;
}
</style>
